<template>
  <div class="login">
    <div class="login-input">
      <p style="font-size: 30px; padding-left: 130px">宠物救助管理平台</p>
      <el-form :model="form" label-width="auto" style="max-width: 700px">
        <div style="padding-left: 30px">
          <!--            姓名-->
          <el-form-item label="用户名:">
            <el-input placeholder="请输入用户名" clearable v-model="form.name" />
          </el-form-item>
          <!--            密码-->
          <el-form-item label="密&nbsp码:">
            <el-input placeholder="请输入密码" type="password" clearable v-model="form.password" />
          </el-form-item>
        </div>
        <!--        登录按钮-->
        <div style="padding-left: 150px">
          <el-button type="primary" @click="handlerLogin">登录</el-button>
          <el-button type="primary" @click="dialogFormVisible = true">注册</el-button>
        </div>
      </el-form>
    </div>
  </div>
  <el-dialog v-model="dialogFormVisible" title="注册" width="400">
    <el-form model="register" label-width="auto">
      <el-form-item label="用户名:" :label-width="formLabelWidth" style="width: 350px">
        <el-input v-model="register.mobile" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码:" :label-width="formLabelWidth" style="width: 350px">
        <el-input type="password" v-model="register.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份类型:" :label-width="formLabelWidth" style="width: 350px">
        <el-select v-model="register.identity" placeholder="请选择您的身份">
          <el-option label="超级管理员" value="admin" />
          <el-option label="商户" value="users" />
          <el-option label="用户" value="business" />
        </el-select>
      </el-form-item>
      <div style="padding-left: 120px">
        <el-button type="primary">确定</el-button>
        <el-button type="primary">取消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import router from '../router'

const dialogFormVisible = ref(false)
const formLabelWidth = '90'
const form = reactive({
  name: '',
  password: ''
})
const handlerLogin = () => {
  router.push({ path: '/main' })
}
const register = reactive({
  name: '',
  mobile: '',
  identify: ''
})
</script>

<style setup lang="scss">
.login {
  position: fixed;
  background: url('../assets/backgound.png');
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}

.login-input {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 120px 15px 25px;
  border-radius: 5px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
</style>
